<template>
  <div class="handling-list">
    <div class="row clearfix">
      <div class="col ">
        <div class="input-label">手机号</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchCondition.mobile" @keyup="checknumber" maxlength="11">
        </div>
      </div>
      <div class="col">
        <div class="input-label">关键词</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchCondition.keyword">
        </div>
      </div>
      <div class="col">
        <div class="input-label">用户类型</div>
        <div class="input-box">
          <Select v-model="searchCondition.userType">
            <Option v-for="item in userTypeList" :value="item.value" :key="item">{{ item.label }}</Option>
          </Select>
        </div>
      </div>
    </div>

    <div class="row clearfix">
      <div class="col ">
        <div class="input-label">状态</div>
        <div class="input-box">
          <Select v-model="searchCondition.reportStatus">
            <Option v-for="item in reportStatusList" :value="item.value" :key="item">{{ item.label }}</Option>
          </Select>
        </div>
      </div>
      <div class="col">
        <div class="input-label">最后处理人</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchCondition.followManage">
        </div>
      </div>
      <div class="col">
        <div class="input-label">用户反馈</div>
        <div class="input-box">
          <Select v-model="searchCondition.userFeedback">
            <Option v-for="item in userFeedbackList" :value="item.value" :key="item">{{ item.label }}</Option>
          </Select>
        </div>
      </div>
    </div>

    <div class="row clearfix">
      <div class="col">
        <div class="input-label">提交日期</div>
        <div class="input-box">
          <Date-picker class="release-date" :value="searchCondition.createDate" format="yyyy/MM/dd" type="daterange" :editable="false"
                       placement="bottom-start" placeholder="选择日期" @on-change="selectCreateDate"></Date-picker>
        </div>
      </div>
      <div class="col">
        <div class="input-label">最后处理日期</div>
        <div class="input-box">
          <Date-picker class="release-date" :value="searchCondition.dealDate" format="yyyy/MM/dd" type="daterange" :editable="false"
                       placement="bottom-start" placeholder="选择日期" @on-change="selectDealDate"></Date-picker>
        </div>
      </div>
      <div class="col" style="padding-left: 34px;">
          <Checkbox class="search-checkout" v-model="isNobodyHandled">查询无人处理的</Checkbox>
          <!--<Checkbox class="search-checkout" v-model="isZfxf">查询提交政风行风的案件</Checkbox>-->
      </div>

    </div>
    <div class="row clearfix">
      <div class="action-btn" >
        <div class="search-btn clear " @click="reset()">清空</div>
        <div class="search-btn search" @click="search(false)">查询</div>
      </div>
    </div>
    <div class="sort-time" v-if="reportList.length>0">
      <Checkbox class="search-checkout is-desc" v-model="isAsc">按最后处理时间正序排列</Checkbox>
    </div>
    <!--列表-->
    <div class="allulitem" v-if="reportList.length>0">
      <div class="everyitem clearfix" v-for="item in reportList">
        <div class="leftimg fl">
          <img :src="item.showImgUrl" alt="首图地址">
        </div>
        <div class="rightcontent fl">
          <p class="line6"><span class="subjectname" @click.stop="goToSubject(item)" v-if="item.subjectName">{{item.subjectName}}</span>{{item.content.replace(/[\r\n]/g,' ')}}</p>
          <div class="contenttextdown clearfix">
            <div class="col clearfix" style="padding-left: 0">
              <div class="titlecolor fl">
                <p>手机号：</p>
                <p>最后处理人：</p>
                <p>当前状态：</p>
              </div>
              <div class="contentcolor fl">
                <p>{{item.mobile}}<i class="icon icon-authed" v-if="item.userType==1"></i></p>
                <p>{{item.followManage?item.followManage:'暂无'}}</p>
                <p>{{item.reportStatus | reportStatusStr}}</p>
              </div>
            </div>
            <div class="col clearfix" style="padding-left: 0">
              <div class="titlecolor fl">
                <p>发布时间：</p>
                <p>最后处理时间：</p>
                <p>用户最后确认时间：</p>
              </div>
              <div class="contentcolor fl">
                <p>{{item.createTime}}</p>
                <p>{{item.dealDate?item.dealDate:'暂无'}}</p>
                <p>{{item.userFinalTime?item.userFinalTime:"未确认"}}</p>
              </div>
            </div>

          </div>

        </div>
        <div class="list-btn-group">
          <div class="list-btn" @click="viewReport(item.convId)">查看详情</div>
          <div class="list-btn" @click="handleReport(item.convId)" v-if="item.reportStatus==1||item.reportStatus==0">跟进处理</div>
        </div>
      </div>
    </div>
    <div class="allulitem list-nodata" v-if="reportList.length==0">
      暂无数据
    </div>
    <!--分页-->
    <div class="page" v-if="dataTotal>pageSize">
      <Page :total=dataTotal :pageSize=pageSize :current=pageNum @on-change="search" show-total>
      </Page>
    </div>
    <!--提示框-->
    <Modal class="warning-modal"
           v-model="showWarnModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="warn-modal-body">
        <i class="modal-icon"></i>
        <p class="modal-content">{{warnContent}}</p>
      </div>
      <div slot="footer">
        <div class="warn-modal-footer">
          <span class="modal-close-btn" @click="closeModal">确定</span></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import index from "./handling-list.js"
  export default index;
</script>
<style scoped>
  .handling-list {
    padding: 43px 30px 10px;
  }
  .subjectname{
    margin-right: 10px;
    color: #3F94FC;
    cursor: pointer;
  }
  .action-btn{
    float: right;
  }
  .action-btn div.search-btn{
    float: right;
    margin-right: 30px;
  }
  .action-btn div.search-btn:first-child{
    margin-right: 0;
  }
</style>
